<ion-item [formGroup]="parent" class="overflow-visible">
	<ion-label position="floating">
		{{ "TRANSACTIONS_PAGE.FEE" | translate }}
	</ion-label>

	<div
		data-testid="c-input-fee__controls"
		*ngIf="hasRange"
		class="mb-1 w-full"
	>
		<div class="flex items-center">
			<ion-button
				data-testid="c-input-fee__controls__min"
				[fill]="currentFee === limitMin ? 'solid' : 'outline'"
				[color]="
					currentFee === limitMin ? 'success-light' : 'primary-light'
				"
				(click)="handleClickButton(limitMin)"
				mode="ios"
				class="flex-1 mr-2"
			>
				{{ "INPUT_FEE.MIN" | translate }}
			</ion-button>
			<ion-button
				data-testid="c-input-fee__controls__avg"
				*ngIf="avg && avg !== max"
				[fill]="currentFee === avg ? 'solid' : 'outline'"
				[color]="currentFee === avg ? 'success-light' : 'primary-light'"
				(click)="handleClickButton(avg)"
				mode="ios"
				class="flex-1 mr-2"
			>
				{{ "INPUT_FEE.AVG" | translate }}
			</ion-button>
			<ion-button
				data-testid="c-input-fee__controls__max"
				[fill]="currentFee === max ? 'solid' : 'outline'"
				[color]="currentFee === max ? 'success-light' : 'primary-light'"
				(click)="handleClickButton(max)"
				mode="ios"
				class="flex-1"
			>
				{{ "INPUT_FEE.MAX" | translate }}
			</ion-button>
		</div>
	</div>

	<input-currency
		data-testid="c-input-fee__currency"
		[isRelaxed]="hasRange"
		[formControl]="inputControl"
		name="fee"
		(inputCurrencyUpdate)="emitUpdate($event)"
		class="w-full"
	></input-currency>

	<ion-range
		data-testid="c-input-fee__range"
		*ngIf="hasRange"
		step="1"
		[min]="limitMin"
		[max]="max"
		pin="false"
		class="absolute py-0 w-full"
		[formControl]="rangeControl"
	></ion-range>
</ion-item>

<p
	data-testid="c-input-fee__hint"
	*ngIf="isStatic && !inputControl.dirty"
	class="c-input-fee__hint c-input-fee__hint--info"
	translate
	[translateParams]="{ fee: max | unitsSatoshi }"
>
	INPUT_FEE.STATIC_FEE
</p>

<p
	*ngIf="(avg && currentFee < avg) || currentFee < min"
	class="c-input-fee__hint c-input-fee__hint--warn"
>
	{{ "INPUT_FEE.LOW_FEE_NOTICE" | translate }}
</p>

<p *ngIf="currentFee > max" class="c-input-fee__hint c-input-fee__hint--warn">
	{{ "INPUT_FEE.ADVANCED_NOTICE" | translate }}
</p>
